<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png" /> -->
    <!-- <el-row>
      <el-col>
        大文件传输
        <el-plupload :apiUrl="apiUrl" @onUploaded="uploaded" size="mini" />
      </el-col>
      <el-col>
        小文件传输
        <el-simupload :apiUrl="apiUrl" @onUploaded="v1_uploaded" size="mini" />
      </el-col>
    </el-row>

    <el-row>
      文件管理
      <el-filemanager :apiUrl="apiUrl" :isSimple="isSimple" size="mini" />
    </el-row>-->

    <wkupload
      :apiUrl="apiUrl"    
      :autoRemove="true"
      :removeDelay="5000"
      :enableList="true"
      size="mini"
      storeType="0"
      :headers="headers"
      :chunkSize="chunkSize"
    ></wkupload>
  </div>
</template>

<script>
/* eslint-disable */
import elplupload from "./components/el-plupload";
import elsimupload from "./components/el-simupload";
import elfilemanager from "./components/el-filemanager";
import wkupload from "./components/workeruploader/workerupload.vue";
export default {
  name: "app",
  components: {
    "el-plupload": elplupload,
    "el-simupload": elsimupload,
    "el-filemanager": elfilemanager,
    wkupload
  },
  data: function() {
    return {
      apiUrl: "http://localhost:8888",
      isSimple: true,
      chunkSize: 4 * 1024 * 1024,
      headers: {
        Authorization: ""
      }
    };
  },
  mounted() {
    //获取token
    this.headers.Authorization = "FoC_qKTNyOBwnZ6U65GnRspko47F";
  },
  methods: {
    uploaded(file) {
      console.log(file);
      let fileUrl =
        this.apiUrl +
        "/api/v2/downloader/stream/" +
        encodeURI(file.name) +
        "?hash=" +
        file.hash;
      this.files.push(fileUrl);
      console.log(fileUrl);
    },
    v1_uploaded(file) {
      console.log(file);
      let fileUrl =
        this.apiUrl +
        "/api/v1/downloader/stream/" +
        encodeURI(file.name) +
        "?hash=" +
        file.hash;
      this.files.push(fileUrl);
      console.log(fileUrl);
    }
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
